<template>
  <div class="container">
    <div class="box-one">
      <img class="mask-one" src="https://hefei.jiakaobaodian.com/core-assets/jiakao/application/home/files/2d1920df784226626de9efd062e808a2.png" alt="" />
      <span style="font-size: 20px; color: #333333">教练宝典APP</span>
      <img style="width: 300px; height: 454px" src="https://hefei.jiakaobaodian.com/core-assets/jiakao/application/home/files/f4b3be31a83c5d02bf5cb2e0fb11636b.png" alt="" />
    </div>
    <div class="box-two">
      <img class="mask-two" src="https://hefei.jiakaobaodian.com/core-assets/jiakao/application/home/files/2d1920df784226626de9efd062e808a2.png" alt="" />
      <span style="font-size: 20px; color: #333333">驾考宝典APP</span>
      <img style="width: 430px; height: 504px" src="https://hefei.jiakaobaodian.com/core-assets/jiakao/application/home/files/48726c2bb302051522dfc028c0532488.png" alt="" />
    </div>
    <div class="box-three">
      <img class="mask-three" src="https://hefei.jiakaobaodian.com/core-assets/jiakao/application/home/files/2d1920df784226626de9efd062e808a2.png" alt="" />
      <span style="font-size: 20px; color: #333333">买车宝典APP</span>
      <img style="width: 265px; height: 388px" src="https://hefei.jiakaobaodian.com/core-assets/jiakao/application/home/files/40ab1d6a3ed0757b51ad19cbec3b29c4.png" alt="" />
    </div>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
.container {
  width: 1200px;
  margin: 60px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .box-one {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translateY(25px);
    transition: all 1s;

    .mask-one {
      width: 266px;
      height: 374px;
      position: absolute;
      top: 50%;
      transform: translateY(-35%);
      display: none;
    }
  }

  .box-one:hover {
    transform: translateY(-25px);
  }

  .box-one:hover .mask-one {
    display: block;
  }

  .box-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translateY(-12px);
    transition: all 1s;

    .mask-two {
      width: 266px;
      height: 374px;
      position: absolute;
      top: 50%;
      transform: translateY(-20%);
      display: none;
    }
  }

  .box-two:hover {
    transform: translateY(-50px);
  }

  .box-two:hover .mask-two {
    display: block;
  }

  .box-three {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translateY(47px);
    transition: all 1s;

    .mask-three {
      width: 266px;
      height: 374px;
      position: absolute;
      top: 50%;
      transform: translateY(-35%);
      display: none;
    }
  }

  .box-three:hover {
    transform: translateY(0px);
  }

  .box-three:hover .mask-three {
    display: block;
  }
}
</style>
